<template>
  <div>
    <home-header></home-header>
    <home-swiper :list="swiperList"></home-swiper>
    <home-icons :list="iconList"></home-icons>
    <home-recommend :list="recommendList"></home-recommend>
    <home-weekend :list="weekendList"></home-weekend>
  </div>
</template>

<script>
import axios from "axios";
import { mapState } from "vuex";
import HomeHeader from "../components/home/Header.vue";
import HomeSwiper from "../components/home/Swiper.vue";
import HomeIcons from "../components/home/Icons.vue";
import HomeRecommend from "../components/home/Recommend.vue";
import HomeWeekend from "../components/home/Weekend.vue";
export default {
  name: "Home",
  components: { HomeHeader, HomeSwiper, HomeIcons, HomeRecommend, HomeWeekend },
  data() {
    return {
      swiperList: [],
      iconList: [],
      recommendList: [],
      weekendList: [],
      lastCity: "",
    };
  },
  computed: {
    ...mapState(["city"]),
  },
  methods: {
    getHomeInfo() {
      axios
        .get(
          "https://www.fastmock.site/mock/bf89f5eb4e2c2bbc6a707ef62de3f1d1/api/index.json?city=" +
            this.city
        )
        .then(this.getHomeInfoSucc);
    },
    getHomeInfoSucc(res) {
      res = res.data;
      if (res.ret && res.data) {
        const data = res.data;
        this.swiperList = data.swiperList;
        this.iconList = data.iconList;
        this.recommendList = data.recommendList;
        this.weekendList = data.weekendList;
      }
    },
  },
  mounted() {
    console.log(this.city);
    this.lastCity = this.city;
    this.getHomeInfo();
  },
  // 页面首次加载和页面重新被加载的时候执行
  activated() {
    console.log("activated");
    // 判断上次和这次的城市是不是一样的，不是的话，重新发送请求
    if (this.lastCity !== this.city) {
      this.lastCity = this.city;
      this.getHomeInfo();
    }
  },
};
</script>

<style lang="scss">
</style>
